<template>
    <el-row justify="center" class="row">
        <el-col :span="4" :xs="3" :sm="3" :md="3" :lg="4" :xl="5"><div class="grid-content ep-bg-purple" />
            <p style="font-weight: 600;margin: 10px auto;text-align: center;font-size: 24px;">个人主页</p>
            <el-menu
                class="el-menu-vertical-demo"
                @select="handleSelect" 
                :default-active="changeMuen"
            >
              <!-- @open="handleOpen"
              @close="handleClose" -->
                <el-menu-item index="1">
                    <el-icon><User /></el-icon>
                    <span>个人信息</span>
                </el-menu-item>
                <el-menu-item index="2" >
                    <el-icon><EditPen /></el-icon>
                    <span>发布帖子</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon><Clock /></el-icon>
                    <span>已发布帖子</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon><Star /></el-icon>
                    <span>已收藏</span>
                </el-menu-item>
                <el-menu-item index="5">
                    <el-icon><IceTea /></el-icon>
                    <span>已点赞</span>
                </el-menu-item>
            </el-menu>
            <!-- <Button type="" @click="GO">qw</Button> -->
        </el-col>
        <el-col class="col demo1" :span="21" :xs="21" :sm="21" :md="21" :lg="20" :xl="19">
            <div v-if="changeMuen=='1'">
                <PersonInf></PersonInf>
            </div>
            <div v-if="changeMuen=='2'">
                <AddPost></AddPost>
            </div>
            <div v-if="changeMuen=='3'">
                <SelfPost></SelfPost>
            </div>
            <div v-if="changeMuen=='4'">
                <CollectPost></CollectPost>
            </div>
            <div v-if="changeMuen=='5'">
                <UpvotePost></UpvotePost>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import usePersonStore from '@/store/forum/person'
import PersonInf from '@/components/PersonInf/index.vue'
import AddPost from '@/components/Post/AddPost.vue'
import SelfPost from '@/components/Post/SelfPost.vue'
import CollectPost from '@/components/Post/CollectPost.vue'
import UpvotePost from '@/components/Post/UpvotePost.vue'

export default {
    components:{
        PersonInf,
        AddPost,
        SelfPost,
        CollectPost,
        UpvotePost
    },
    data(){
        return {
        }
    },
    computed:{
        changeMuen(){
            return usePersonStore().changeMuen;
        }
    },
    methods:{
        GO(){
            this.$router.push("/post?postId=1");
        },
        handleSelect(key, keyPath){
        //   console.log(key, keyPath)
          usePersonStore().changeMuen = ''+key;
        },
    }
}
</script>

<style lang="scss" scoped>
.row {
  margin-bottom: 20px;
}
.row:last-child {
  margin-bottom: 0;
}
.demo1{
    // background: #9cf4be;
}
.col {
  border-radius: 4px;
//   height: 500px;
}
</style>